@import "mixins";
@import "vars";

.jw-controlbar {
    display: table;
    position: absolute;
    bottom: 0;
    height: @controlbar-height;
    width: 100%;
    padding: 0 @ui-padding;

    .jw-hidden {
        display: none;
    }
}

.jw-background-color {
    background-color: @background-color;
}

.jw-slider-horizontal {
  background-color: transparent;
}

.jw-group {
    display: table-cell;
}

.jw-controlbar-center-group {
    width: 100%;
    padding: 0 @ui-padding;

    .jw-slider-time, .jw-text-alt {
        padding: 0;
    }

    .jw-text-alt {
        display: none;
    }
}

.jw-controlbar-left-group,
.jw-controlbar-right-group {
    white-space: nowrap;
}

// control bar content (icons/text)

.jw-knob,
.jw-icon-inline,
.jw-icon-tooltip,
.jw-icon-display,
.jw-option:before {
    .hover(@hover-color);
}

.jw-icon-inline,
.jw-icon-tooltip,
.jw-slider-horizontal,
.jw-text-elapsed,
.jw-text-duration {
    display: inline-block;
    height: @controlbar-height;
    position: relative;
    line-height: @controlbar-height;
    vertical-align: middle;
    cursor: pointer;
    padding: 0 @ui-padding;
}

.jw-icon-inline,
.jw-icon-tooltip {
    min-width: @controlbar-height * 5/8;
    text-align: center;
}

.jw-icon-playback {
    min-width: 2.25em;
}

.jw-icon-volume {
    min-width: 1.75em;
    text-align: left;
}

.jw-time-tip {
    line-height: 1em;
    pointer-events: none;
}

.jw-icon-cast {
    display: none;
}

.jw-slider-volume.jw-slider-horizontal,
.jw-icon-inline.jw-icon-volume {
    display: none;
}

.jw-button-color {
    color: @inactive-color;
    .hover(@hover-color);
    &:focus {
      outline: none;
      color: @hover-color;
    }
}

.jw-toggle {
    color: @toggle-active;
    &.jw-off {
        color: @toggle-inactive;
    }
    &:focus {
      outline: none;
      color: @hover-color;
    }
}
